<template>
  <div class="thumb-example">
    <!-- swiper1 -->
    <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop" style="height:450px;width:100%">
      <swiper-slide class="slide-1" v-for="(item,index) in imgArr" :key="index" :style="item.img" style="height:450px;width:100%"></swiper-slide>
      <!-- <swiper-slide class="slide-2"></swiper-slide>
      <swiper-slide class="slide-3"></swiper-slide>
      <swiper-slide class="slide-4"></swiper-slide>
      <swiper-slide class="slide-5"></swiper-slide> -->
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    </swiper>
    <!-- swiper2 Thumbs -->
    <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs" >
      <swiper-slide class="slide-1" v-for="(item,index) in imgArr" :key="index" :style="item.img" style="height:120px;width:200px"></swiper-slide>
      <!-- <swiper-slide class="slide-2"></swiper-slide>
      <swiper-slide class="slide-3"></swiper-slide>
      <swiper-slide class="slide-4"></swiper-slide>
      <swiper-slide class="slide-5"></swiper-slide> -->
    </swiper>
  </div>
</template>

<script>
export default {
  name: "swiper-example-thumbs-gallery",
  title: "Thumbs gallery with Two-way control",
  components: {},
  data() {
    return {
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      imgArr: [
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/1.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/2.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/3.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/4.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/5.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/6.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        },
        {
          img: {
            backgroundImage:
              "url(" + require("../../assets/images/example/7.jpg") + ")",
            backgroundSize: "cover",
            backgroundPosition: "center",
            nackgroundRepeat: "no-repeat"
          }
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  }
};
</script>

<style scoped>
.thumb-example {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}
.swiper-slide .slide-1 {
  background-image: url("../../assets/images/example/1.jpg");
}
.swiper-slide .slide-2 {
  background-image: url("../../assets/images/example/2.jpg");
}
.swiper-slide .slide-3 {
  background-image: url("../../assets/images/example/4.jpg");
}
.swiper-slide .slide-4 {
  background-image: url("../../assets/images/example/5.jpg");
}
.swiper-slide .slide-5 {
  background-image: url("../../assets/images/example/6.jpg");
}

.swiper .gallery-top {
  height: 80%;
  width: 100%;
}
.swiper .gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.swiper .gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.swiper .gallery-thumbs .swiper-slide-active {
  opacity: 1;
}

</style>